<template>
  <Layout>
    <PageHeaderNew :items="items"></PageHeaderNew>
    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-body">
            <div class="states-type">
              <span class="type-title">行业分类:</span>
              <div class="btns" :class="{'display_':industryType}">
                <button
                  type="button"
                  class="btn btn-light rounded-pill btn-sm states-type-item"
                  :class="{ isActive: siteChange == item.index }"
                  v-for="item in sitetype"
                  :key="item.index"
                  @click="allSites(item)"
                >
                  {{ item.name }}
                </button>
              </div>
              <div class="operation">
                <span class="pointer" v-if="industryType" @click="industryType=false">更多<i class="ri-arrow-down-s-line"></i></span>
                <span class="pointer" v-else @click="industryType=true">收起<i class="ri-arrow-up-s-line"></i></span>
              </div>
            </div>
            <div class="states-time">
              <span class="time-title">事件分类:</span>
              <div class="btns" :class="{'display_':eventType}">
                <button
                  type="button"
                  class="btn btn-light rounded-pill btn-sm states-time-item"
                  :class="{ isActive: eventChange == item.index }"
                  v-for="item in event"
                  :key="item.index"
                  @click="eventItem(item)"
                >
                  {{ item.name }}
                </button>
              </div>
              <div class="operation">
                <span class="pointer" v-if="eventType" @click="eventType=false">更多<i class="ri-arrow-down-s-line"></i></span>
                <span class="pointer" v-else @click="eventType=true">收起<i class="ri-arrow-up-s-line"></i></span>
              </div>
            </div>
            <div class="row col-md-12">
              <div class="col-md-3">
                <div class="form-group row">
                  <label class="col-md-4 padding-right col-form-label col-offset-1"
                    >情感分类</label
                  >
                  <div class="col-md-8">
                    <select class="form-control .col-md-offset-2">
                      <option>积极</option>
                      <option>消极</option>
                      <option>中性</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group row">
                  <label class="col-md-2 padding-right col-form-label"
                    >日期范围</label
                  >
                  <div class="col-md-10">
                    <el-date-picker
                      v-model="dateRange"
                      type="datetimerange"
                      :picker-options="pickerOptions"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    >
                    </el-date-picker>
                  </div>
                </div>
              </div>
            </div>
            <signTransaction />
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>
<script>
import Layout from "../../layouts/main";
import PageHeaderNew from "@/components/page-header-new";

import signTransaction from "./signTransaction";
export default {
  components: {
    Layout,
    PageHeaderNew,
    signTransaction,
  },
  data () {
    return {
      items: [
        {
          text: "标签管理",
          url: "/lable",
        },{
          text: "资讯标记数据",
          url: "/",
        }
      ],
      // 行业分类
      sitetype: [
        {
          name: "全部",
          index: 1,
        },{
          name: " 证券期货",
          index: 2,
        },{
          name: "体育产业",
          index: 3,
        },{
          name: "医疗行业",
          index: 4,
        },{
          name: "教育行业",
          index: 5,
        },{
          name: "房产行业",
          index: 6,
        },{
          name: "银行业",
          index: 7,
        },{
          name: " 政府部门",
          index: 8,
        },{
          name: "互联网",
          index: 9,
        },{
          name: "汽车行业",
          index: 10,
        },{
          name: "农业服务",
          index: 11,
        },{
          name: "文化传媒",
          index: 12,
        },{
          name: "法律司法",
          index: 13,
        },{
          name: "生活服务",
          index: 14,
        },{
          name: " 酒店餐饮",
          index: 15,
        },{
          name: "旅游行业",
          index: 16,
        },{
          name: "商贸零售",
          index: 17,
        },{
          name: "信息技术",
          index: 18,
        },{
          name: "航空运输",
          index: 19,
        },{
          name: "交通出行",
          index: 20,
        },{
          name: "制药行业",
          index: 21,
        },{
          name: "电力电网",
          index: 22,
        },{
          name: "游戏行业",
          index: 23,
        },{
          name: "物流行业",
          index: 24,
        },{
          name: "生物医药",
          index: 25,
        },{
          name: " 纺织服装",
          index: 26,
        },{
          name: "集成电路",
          index: 27,
        },{
          name: "环保节能",
          index: 28,
        },{
          name: "保险行业",
          index: 29,
        },{
          name: "煤炭开采",
          index: 30,
        },{
          name: "其他",
          index: 31,
        }
      ],
      siteChange: 1,
      industryType: true,
      // 事件分类
      event: [
        {
          name: "全部",
          index: 1,
        },{
          name: " 网事小说",
          index: 2,
        },{
          name: "项目规划",
          index: 3,
        },{
          name: "竞技比赛",
          index: 4,
        },{
          name: "疫情防控",
          index: 5,
        },{
          name: "事件突发",
          index: 6,
        },{
          name: "业绩优异",
          index: 7,
        },{
          name: " 投资融资",
          index: 8,
        },{
          name: "职务调整",
          index: 9,
        },{
          name: "政策影响",
          index: 10,
        },{
          name: "招商引资",
          index: 11,
        },{
          name: "路演活动",
          index: 12,
        },{
          name: "产品问题",
          index: 13,
        },{
          name: "增资募资",
          index: 14,
        },{
          name: " 行业研究",
          index: 15,
        },{
          name: "行业竞争",
          index: 16,
        },{
          name: "项目验收",
          index: 17,
        },{
          name: "战略合作",
          index: 18,
        },{
          name: "历史事件",
          index: 19,
        },{
          name: "乡村振兴",
          index: 20,
        },{
          name: "诈骗欺诈",
          index: 21,
        },{
          name: "股市公告",
          index: 22,
        },{
          name: "党建活动",
          index: 23,
        },{
          name: "新品发布",
          index: 24,
        },{
          name: "榜上有名",
          index: 25,
        },{
          name: " 拟定上市",
          index: 26,
        },{
          name: "荣获奖项",
          index: 27,
        },{
          name: "业绩下滑",
          index: 28,
        },{
          name: "诉讼纠纷",
          index: 29,
        },{
          name: "违法违规",
          index: 30,
        },{
          name: "其他",
          index: 31,
        }
      ],
      eventChange: 1,
      eventType: true,
      pickerOptions: {
        shortcuts: [
          {
            text: "24小时",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date(new Date().toLocaleDateString()).getTime());
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const end = new Date(new Date(new Date().toLocaleDateString()).getTime());
              const start = new Date(new Date(new Date().toLocaleDateString()).getTime());
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              end.setTime(end.getTime() - 1);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "3天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      dateRange: "",
    }
  },
  methods: {
    //站点筛选
    allSites(item) {
      this.siteChange = item.index;
    },
    //事件分类
    eventItem(item) {
      this.eventChange = item.index;
    },
  }
}
</script>
<style lang="scss" scoped>
.isActive {
  color: #fff;
  background-color: #5664d2;
}
.all-products {
  font-size: 15px;
  font-weight: bold;
  margin-top: 20px;
}
.states-type {
  margin-top: 20px;
  display: flex;
  .type-title {
    display: inline-block;
    color: #74788d;
    margin-right: 10px;
    min-width: 65px;
    padding-top: 4px;
  }
  .states-type-item {
    font-size: 12px;
    margin-left: 10px;
    margin-bottom: 10px;
    padding-left: 8px;
    padding-right: 8px;
    min-width: 80px;
    &:hover {
      cursor: pointer;
    }
  }
}
.states-time {
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  .time-title {
    display: inline-block;
    color: #74788d;
    margin-right: 10px;
    min-width: 65px;
    padding-top: 4px;
  }
  .states-time-item {
    font-size: 12px;
    margin-left: 10px;
    margin-bottom: 10px;
    padding-left: 8px;
    padding-right: 8px;
    min-width: 70px;
    &:hover {
      cursor: pointer;
    }
  }
}
.btns{
  width: 85%;
  overflow: hidden;
}
.display_{
  height: 38px;
}
.operation{
  width: 9%;
  text-align: right;
  padding-top: 2px;
  i{
    vertical-align: bottom;
  }
}
.padding-right {
  padding-right: 0;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}
.row {
  .el-input__inner {
    width: 100%;
    height: 1.7rem;
    padding: 0rem 0.75rem;
    line-height: 1.7rem;
    ::v-deep .el-input__icon,
    ::v-deep .el-range-separator {
      line-height: 1.7rem;
    }
  }
  input,
  select {
    height: 1.7rem;
    padding: 0rem 0.75rem;
  }
}
.col-md-12,.col-md-8,.col-md-10{
  padding-left: 0;
}
</style>
